{% load static %}

<html lang="en">
<head>
    <meta charset="utf-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.9.1/riot+compiler.min.js" integrity="sha256-+juQoCyuN9TkYFfIoWlKlLeUumBwxbekKF2+/vuV6So=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script src="{% static 'riot/submission-form.tag' %}" type="riot/tag"></script>

    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/imports.css">

    <script>
        // Setup CSRF
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
    </script>

    <style>
        body {
            padding: 20px;
        }

        iframe {
            border: none;
        }

        .title {
            margin-top: 0;
        }

        @media (min-width: 768px) {
            .dl-horizontal dt {
                width: 215px;
            }

            .dl-horizontal dd {
                margin-left: 235px;
            }
        }
    </style>
</head>

<body>
<h3 class="title">Codalab submission panel</h3>
<dl class="dl-horizontal">
    <dt>Submitting to</dt>
    <dd>{{ competition }}</dd>

    <dt>Current phase</dt>
    <dd>{{ current_phase.label }}</dd>

    <dt>Max submissions per day</dt>
    <dd>{{ current_phase.max_submissions_per_day }}</dd>

    <dt>Max submissions total</dt>
    <dd>{{ current_phase.max_submissions }}</dd>
</dl>

{% if request.user.is_authenticated %}
    {% if phase.is_future %}
        <p>This phase of the competition has not started yet. Please check back later.</p>
    {% else %}
        <p>Here are your submissions to date
            <span class="small">(<span class="glyphicon glyphicon-ok"></span> indicates submission on leaderboard )</span>:
        </p>

        <submission-form competition_id="{{ competition.pk }}" phase_id="{{ current_phase.pk }}"></submission-form>

        <div class="user_results">
            <input type="hidden" id="submission_phase_id" class="form-control" value="{{ phase.id }}">
            <div class="table-responsive">
                <table class="table resultsTable table-striped table-bordered" id="user_results">
                    <thead>
                    <tr>
                        <th>#</th>
                        {% if not phase.is_blind %}
                            <th>Score</th>
                        {% endif %}
                        <th>Filename</th>
                        <th>Submission date</th>
                        <th>Status</th>
                        <th class="text-center"><span class="glyphicon glyphicon-ok"></span></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% if submission_info_list|length_is:"0" %}
                        <tr class="noData">
                            <td class="tdDetails" colspan="7">No data available in table</td>
                        </tr>
                    {% else %}
                        {% for submission_info in submission_info_list %}
                            <tr id="{{ submission_info.id }}"
                                {% if submission_info.exception_details %}
                                data-exception="{{ submission_info.exception_details|escape }}"
                                {% endif %}
                                data-score="{{ submission_info.score|default_if_none:""|escape }}"
                                data-description="{{ submission_info.description|default_if_none:""|escape }}"
                                data-method-name="{{ submission_info.method_name|default_if_none:""|escape }}"
                                data-method-description="{{ submission_info.method_description|default_if_none:""|escape }}"
                                data-project-url="{{ submission_info.project_url|default_if_none:""|escape }}"
                                data-publication-url="{{ submission_info.publication_url|default_if_none:""|escape }}"
                                data-team-name="{{ submission_info.team_name|default_if_none:""|escape }}"
                                data-organization-or-affiliation="{{ submission_info.organization_or_affiliation|default_if_none:""|escape }}"
                                data-bibtex="{{ submission_info.bibtex|default_if_none:""|escape }}"
                                data-is-public="{% if submission_info.is_public %}True{% endif %}">
                                {% if submission_info.is_finished %}
                                    <input type="hidden" name="state" value='1'/>
                                {% else %}
                                    <input type="hidden" name="state" value='0'/>
                                {% endif %}
                                <td>{{ forloop.counter }}</td>
                                {% if not phase.is_blind %}
                                    <td>{{ submission_info.score }}</td>
                                {% endif %}
                                <td>{{ submission_info.filename }}</td>
                                <td>{{ submission_info.submitted_at|date:"m/d/Y H:i:s" }}</td>
                                <td class="statusName">{{ submission_info.status_name }}</td>
                                {% if submission_info.is_in_leaderboard %}
                                    <td class="status submitted text-center"><span
                                        class="glyphicon glyphicon-ok text-success"></span></td>
                                {% else %}
                                    <td class="status not_submitted text-center"></td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        {% include "web/common/_submission_details_template.html" %}
    {% endif %}
{% else %}
    <i>You must
        <button onclick="check_auth_loop();">login before</button>
        continuing!</i>
{% endif %}

<script>
    riot.mount('*')

    var auth_window = undefined
    var check_auth_loop = function () {
        if (auth_window === undefined) {
            auth_window = window.open("{% url 'account_login' %}?next=/close", "Codalab login", "height=640,width=640")
        }
        if (auth_window.closed) {
            window.location.reload()
        } else {
            setTimeout(check_auth_loop, 10)
        }
    }
</script>
</body>
</html>
